<template>
  <div class="w-100 h-100">
    <containTemplete
      :title="''"
      :secondTitles="[
        ' ',
        ' ',
        ' ',
      ]"
      :slotWidth="[33, 33, 33]"
    >
      <template #left>
        <div class="w-100 h-100">
          <jfqk :selectValue="left_value" :allData="allData"></jfqk>
        </div>
      </template>
      <template #middle>
        <div class="w-100 h-100">
          <yywhcb :selectValue="middle_value" :allData="secondData" />
        </div>
      </template>

      <template #right>
        <div
          class="w-100 h-100"
        >
            <zlzgqk :select-value="right_value" :allData="thirdData" />
        </div>
      </template>

      <template #left_control>
        <proSelect
            :optionsData="useOptions().projectTypeList"
            :defaultSelectValue="0"
            v-model:select-value="left_value"
            :width="240"
            style="position: relative;top: 30px"
        >
        </proSelect>
      </template>

      <template #middle_control>
        <proSelect
            :optionsData="useOptions().year()"
            :defaultSelectValue="new Date().getFullYear()-1"
            v-model:select-value="middle_value"
            :width="150"
            style="position: relative;top: 30px"
        >
        </proSelect>
      </template>

      <template #right_control>
        <proSelect
            :optionsData="useOptions().year()"
            :defaultSelectValue="new Date().getFullYear()-1"
            v-model:select-value="right_value"
            :width="150"
            style="position: relative;top: 30px"
        >
        </proSelect>
      </template>
    </containTemplete>
  </div>
</template>

<script setup lang="ts">
import h_normal from "@/components/common/echart/h_nomal.vue";
import pie_normal from "@/components/common/echart/pie_normal.vue";
import pie_bk from "@/components/project/piebk_vue3.vue";
import twoMessage from "@/components/project/twoMessage.vue";
import ghxmqy from "./ghxmqy.vue";
import list from "./list.vue";
import { useFunc } from "@/hook/useFunc";
import containTemplete from "@/components/project/containTemplete.vue";
import jfqk from './jfqk.vue'
import  yywhcb from './yywhcb.vue'
import zlzgqk from './zlzgqk.vue'
import { useOptions } from "@/hook/useOptions";

let left_value = ref(0)
let middle_value = ref()
let right_value = ref()

const allData:any = ref()
const secondData:any = ref()
const thirdData:any = ref()
onBeforeMount(async() => {
  allData.value= await  useFunc().getData("jsgl","xmjfqk");
  secondData.value= await  useFunc().getData("jsgl","yywhcb");
  thirdData.value= await  useFunc().getData("jsgl","zlzgqk");
});
</script>

<style scoped lang="less">
/deep/ .bar{
  background: transparent;
}
</style>
